<template>
  <div class="luckdraw-component">
    <div class="prizBox">
          <div v-for="(item, index) in peerData.activitySeckillList" :key="index" class="prizBoxItem" v-if="peerData.activitySeckillList.length>0">
            <div class="prize_bg">
              <el-image :src="getImgUrl(item.peerUrl)" fit="scale-down" v-if="item.prizeType==2"></el-image>
              <el-image :src="xjhb" fit="scale-down" v-else></el-image>
            </div>
            <div class="prize_name">
              <p>{{ item.prizeName }}</p>
            </div>
          </div>
          <div v-for="(item, index) in prizList" :key="index" class="prizBoxItem" v-if="peerData.activitySeckillList.length==0">
            <div class="prize_bg">
              <el-image :src="item.url" fit="scale-down"></el-image>
            </div>
            <div class="prize_name">
              <p>{{ item.name }}</p>
            </div>
          </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      peerData: {
        activitySeckillList: {
          type: Array
        }
      },
    },
    data(){
      return {
        prizList:[
          {
            name:'免费加油券',
            url: require('./luckdraw/jyq.png')
          },
          {
            name:'月租礼包',
            url: require('./luckdraw/yzlb.png')
          },
          {
            name:'洗车立减券',
            url: require('./luckdraw/ljq.png')
          },
          {
            name:'现金红包',
            url: require('./luckdraw/xjhb.png')
          },
        ],
         xjhb: require('./img/vip.png')
      }
    },
    methods: {

    },
  }
</script>

<style scoped>
  .luckdraw-component {
    width: 375px;
    height: 800px;
    border: 1px solid #ccc;
    background: #fffefe;
    font-size: 14px;
    margin: 0 auto;
    /* background: linear-gradient(to bottom, #b7edff, #caf2ff); */
    background-image: url(luckdraw/bg.png);
    background-size: 100% 100%;
  }
  .prizBox{
        width: 285px;
        height: 80px;
        overflow: hidden;
        position: relative;
        top: 335px;
        left: 44px;

  }
  .prizBoxItem{
    display: inline-block;
    width: 70px;
  }
   .prize_bg {
    text-align: center;
    height: 50px;

  }
  .prize_bg  .el-image{
    height: 50px;
    line-height: 50px;
  }
   .prize_name {
    text-align: center;
    font-size: 12px;
    color: #E0382D;
    height: 28px;
    overflow: hidden;
    line-height: 0px;
    white-space: nowrap;
        text-overflow: ellipsis;
  }
</style>
